Ad

Search This Blog

Monday, January 2, 2023

ASP.NET Core Blazor Server project structure

The Blazor Server template creates the initial files and directory structure for a Blazor Server app. The app is populated with demonstration code for a FetchData component that loads data from a registered service, WeatherForecastService, and user interaction with a Counter component.

Data folder: Contains the WeatherForecast class and implementation of the WeatherForecastService that provides example weather data to the app's FetchData component.

Pages folder: Contains the routable components/pages (.razor) that make up the Blazor app and the root Razor page of a Blazor Server app. The route for each page is specified using the @page directive. The template includes the following:

_Host.cshtml: The root page of the app implemented as a Razor Page:

When any page of the app is initially requested, this page is rendered and returned in the response. The Host page specifies where the root App component (App.razor) is rendered.

_Layout.cshtml: The layout page for the _Host.cshtml root page of the app.

Counter component (Counter.razor): Implements the Counter page.

Error component (Error.razor): Rendered when an unhandled exception occurs in the app.

FetchData component (FetchData.razor): Implements the Fetch data page.

Index component (Index.razor): Implements the Home page.

Properties/launchSettings.json: Holds development environment configuration.

Shared folder: Contains the following shared components and stylesheets:

MainLayout component (MainLayout.razor): The app's layout component.

MainLayout.razor.css: Stylesheet for the app's main layout.

NavMenu component (NavMenu.razor): Implements sidebar navigation. Includes the NavLink component (NavLink), which renders navigation links to other Razor components. The NavLink component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.

NavMenu.razor.css: Stylesheet for the app's navigation menu.

SurveyPrompt component (SurveyPrompt.razor): Blazor survey component.

wwwroot: The Web Root folder for the app containing the app's public static assets.

_Imports.razor: Includes common Razor directives to include in the app's components (.razor), such as @using directives for namespaces.

App.razor: The root component of the app that sets up client-side routing using the Router component. The Router component intercepts browser navigation and renders the page that matches the requested address.

appsettings.json and environmental app settings files: Provide configuration settings for the app.

Program.cs: The app's entry point that sets up the ASP.NET Core host and contains the app's startup logic, including service registrations and request processing pipeline configuration:

Specifies the app's dependency injection (DI) services. Services are added by calling AddServerSideBlazor, and the WeatherForecastService is added to the service container for use by the example FetchData component.

Configures the app's request handling pipeline:

MapBlazorHub is called to set up an endpoint for the real-time connection with the browser. The connection is created with SignalR, which is a framework for adding real-time web functionality to apps.

MapFallbackToPage("/_Host") is called to set up the root page of the app (Pages/_Host.cshtml) and enable navigation.

Additional files and folders may appear in an app produced from a Blazor Server project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.

No comments:

Post a Comment